import { Menu } from 'ant-design-vue'
import { MenuItem, MenuItemContent } from './MenuItem'
import { ItemProps } from './props'
import { Menu as IMenu } from './types'

export const renderMenu = (item: IMenu): JSX.Element => {
  const props: ItemProps = {
    iconName: item.icon,
    title: item.title,
    route: item.route,
    key: `${item.id}`,
  }

  if (item.children == undefined || item.children.length == 0) {
    if (props.route == '') {
      return <></>
    }
    return <MenuItem {...props} />
  }

  const title = <MenuItemContent title={props.title} iconName={props.iconName} />

  return (
    <Menu.SubMenu key={props.key} title={title}>
      {item.children && item.children.map((m) => renderMenu(m))}
    </Menu.SubMenu>
  )
}
